import React, { Component } from 'react';

import './account.css'

import Top_tar from '../top_bar/top_bar'
import Main_nav from '../main_nav/main_nav'
import News from '../news/news'
import Menu from '../menu/menu'

import { logOut, cuserInfo } from '../../utils/api'

export default class Account extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    componentDidMount() {

        cuserInfo().then((res) => {
            console.log(res, '个人信息')
            this.setState(() => {
                return {
                    data: res.data.data=='' ? [] : res.data.data,
                }
            })
            
        }) 
    }

    goOutM = (data) => {
        console.log("data===>",data)
        logOut().then((res) => {
            if(res.data.msg = "删除成功") {
                localStorage.clear('token')
                this.props.history.push('/homepage')
            }
        })
    }
    
    render() {
        const { data } = this.state
        return (
            <div>
            <Top_tar {...this.props} />
            <Main_nav {...this.props} />

                <div className="main-content"> 
                <a name="page_content" id="page_content"></a> 
                <header className="account-header"> 
                    <div className="account-header-title"> 
                        <h1>
                            <font style={{verticalAlign: 'inherit'}}>
                                <font style={{verticalAlign: 'inherit'}}>帐户详细资料</font>
                            </font>
                        </h1>
                    </div> 
                    <div className="account-header-logout"> 
                        <span>
                            <a className="customer_logout_link"
                            onClick={this.goOutM.bind(this, data.id)}
                            >
                                <font style={{verticalAlign: 'inherit'}}>
                                    <font style={{verticalAlign: 'inherit'}}>登出</font>
                                </font>
                            </a>
                        </span>
                    </div>
                </header> 
                <div className="feature_divider"></div>        
                    <div className="section-clearfix"> 
                        <aside className="five account-sidebar"> 
                            <div className="account-name">
                                <div title="我的帐户">
                                    <font style={{verticalAlign: 'inherit'}}>
                                        <font style={{verticalAlign: 'inherit'}}>{data.given_name}</font>
                                    </font>
                                    <font style={{verticalAlign: 'inherit'}}>
                                        <font style={{verticalAlign: 'inherit'}}>{data.sur_name}</font>
                                    </font>
                                </div>
                            </div> 
                            <div className="note-one">
                                <font style={{verticalAlign: 'inherit'}}>
                                    <font style={{verticalAlign: 'inherit'}}>{data.mail}</font>
                                </font>
                            </div>
                            <div className="note-two">
                                <font style={{verticalAlign: 'inherit'}}>
                                    <font style={{verticalAlign: 'inherit'}}>主要地址</font>
                                </font>
                            </div> 
                            <div className="address-note"> 
                                <div className="address-note-one">
                                    <font style={{verticalAlign: 'inherit'}}>
                                        <font style={{verticalAlign: 'inherit'}}>目前没有档案地址</font>
                                    </font>
                                </div>
                                <div className="address-note-two">
                                    <a href="#">
                                        <font style={{verticalAlign: 'inherit'}}>
                                            <font style={{verticalAlign: 'inherit'}}>查看地址（0）</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                        </aside> 
                        <main className="account-main"> 
                            <div className="customer_orders"> 
                                <div className="customer_orders-one">
                                    <font style={{verticalAlign: 'inherit'}}>
                                        <font style={{verticalAlign: 'inherit'}}>订单历史</font>
                                    </font>
                                </div> 
                                <div className="customer_orders-two">
                                    <font style={{verticalAlign: 'inherit'}}>
                                        <font style={{verticalAlign: 'inherit'}}>您尚未下任何订单。</font>
                                    </font>
                                </div> 
                                <div className="sixteen columns"> 
                                    <div className="section clearfix"> 
                                        <div className="paginate"></div>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>

                <News {...this.props} />
                <Menu {...this.props} />
            </div>
        );
    }
}